<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<link href="css/yt.css" rel="stylesheet" />
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
	</head>

	<body>
		
		<div class="mui-content">
			
			<div class="mui-row">
				<div class="mui-col-xs-6" style="text-align: center;">

					运行小时数<span class="yt_lable">1000</span>

				</div>
				<div class="mui-col-xs-6" style="text-align: center;">

					断路器状态<span class="yt_lable_red">分闸</span>

				</div>
			</div>

			<div class="mui-row">
				<div class="mui-col-xs-12" style="padding: 5px;">
					<div style="border:0.5px solid #FFFFFF;">
						<div class="mui-row">
							<div class="mui-col-xs-5">
								<div class="yt_table">有功功率<span class="yt_lable_grey">5.6</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">kw</div>
							</div>
							<div class="mui-col-xs-5">
								<div class="yt_table">无功功率<span class="yt_lable_grey">4.4</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">kvar</div>
							</div>

							<div class="mui-col-xs-5">
								<div class="yt_table">R&nbsp;ph<span class="yt_lable_grey">5.6</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">A</div>
							</div>
							<div class="mui-col-xs-5">
								<div class="yt_table">功率因素<span class="yt_lable_grey">4.4</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">PF</div>
							</div>

							<div class="mui-col-xs-5">
								<div class="yt_table">S&nbsp;ph<span class="yt_lable_grey">5.6</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">A</div>
							</div>
							<div class="mui-col-xs-5">
								<div class="yt_table">电压<span class="yt_lable_grey">4.4</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">V</div>
							</div>

							<div class="mui-col-xs-5">
								<div class="yt_table">T&nbsp;ph<span class="yt_lable_grey">5.6</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">A</div>
							</div>
							<div class="mui-col-xs-5">
								<div class="yt_table">频率<span class="yt_lable_grey">4.4</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">Hz</div>
							</div>

							<div class="mui-col-xs-5">
								<div class="yt_table">励磁电流<span class="yt_lable_grey">5.6</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">A</div>
							</div>
							<div class="mui-col-xs-5">
								<div class="yt_table">励磁电压<span class="yt_lable_grey">4.4</span></div>
							</div>
							<div class="mui-col-xs-1">
								<div class="yt_table_left">V</div>
							</div>

						</div>
					</div>
				</div>
			</div>

			<div class="mui-segmented-control" style="margin-top: 10px;margin-bottom: 10px;">
				<div class="mui-row">
					<div class="mui-col-xs-4" style="text-align: center;color: red;">有功功率▼</div>
					<div class="mui-col-xs-4" style="text-align: center;color: blue;">无功功率▼</div>
					<div class="mui-col-xs-4" style="text-align: center;" onclick="parent.dtPicker()" id="dtPicker">月▼</div>
				</div>
			</div>
			<div id="item1">

			</div>
			<!--<div id="item2" class="mui-control-content">

			</div>
			<div id="item3" class="mui-control-content">

			</div>-->
			<!--<div id="item4" class="mui-control-content">

			</div>
			<div id="item5" class="mui-control-content">

			</div>-->
			<div class="mui-slider-indicator">
				<div class="mui-indicator"></div>
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
			<div style="height: 50px;"> </div>
		</div>
		<!--<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">数据</span>
			</a>
			<a class="mui-tab-item" onclick="location='baobiao.html'">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">报表</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>-->
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script type="text/javascript">
			mui.init();
			

			//			window.addEventListener("swipeleft", function() {
			//				mui.openWindow({
			//					url: 'parameter3.html',
			//					show: {
			//						autoShow: false
			//					}
			//				});
			//
			//			});
			//			window.addEventListener("swiperight", function() {
			//				mui.openWindow({
			//					url: 'parameter.html',
			//					show: {
			//						autoShow: false
			//					}
			//				});
			//
			//			});
			var chart = Highcharts.chart('item1', {
				title: {
					text: ''
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				xAxis: {
					gridLineWidth: 1,
					lineWidth: 1,
					tickAmount: 5,
					floor: 0,
					tickPositions: [0, 10, 20, 30, 40]
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle'
				},
				plotOptions: {
					series: {
						label: {
							connectorAllowed: true
						},
						//						pointStart: 2010
					}
				},
				credits: {
					text: '',
					href: ''
				},
				exporting: {
					enabled: false
				},
				series: [{
					name: '有功功率',
					data: [13, 13, 11, 17, 15, 17, 18, 19, 11, 15, 13, 13, 11, 17, 15, 17, 18, 19, 11, 15, 13, 13, 11, 17, 15, 17, 18, 19, 11, 15, 13, 13, 11, 17, 15, 17, 18, 19, 11, 15]
				}, {
					name: '无功功率',
					data: [15, 16, 14, 17, 11, 18, 19, 20, 17, 15, 15, 18, 17, 17, 15, 13, 12, 10, 14, 13, 15, 18, 15, 17, 13, 14, 14, 15, 10, 18, 15, 18, 16, 17, 15, 13, 14, 15, 10, 18]
				}],
				responsive: {
					rules: [{
						condition: {
							maxWidth: 600
						},
						chartOptions: {
							legend: {
								layout: 'horizontal',
								align: 'center',
								verticalAlign: 'bottom'
							}
						}
					}]
				}
			});
			
			
			
		</script>
	</body>

</html>